<template>
	<page  ref='page'>
		<!-- 装修金、明细 wwl -->
		<view class="page">
			<view class="top_box">
				<view class="title">
					余额(元)
				</view>
				<view class="money">
					<text>¥{{userInfo.fitment_amount}}</text>
					<view class="zhuangxiujin" @click="onRule()">装修金说明<image src="https://xiaoqu.wuguoxin.vip/uploads/web/decorationGold01.png" mode="" ></image></view>
				</view>
			</view>
			<view class="list_box_page">
				<block v-if='detailedList && detailedList.length > 0'>
					<view class="list_box" v-for="(item,index) in detailedList" :key='index'>
							<view class="top_box" @click="setOpenList(item.id)">
								<view class="time">
									<text>{{item.name}}</text>
									<image src="https://xiaoqu.wuguoxin.vip/uploads/web/decorationGold_bottom.png" mode="" v-if="getOpenList(item.id)"></image>
									<image src="https://xiaoqu.wuguoxin.vip/uploads/web/decorationGold_right.png" mode=""   v-else ></image>
								</view>
								<view class="detailed">
									<text>收入：{{item.amount}}</text>
									<text style="margin-left: 20rpx;">支出：{{item.low}}</text>
								</view>
							</view>
							<view class="bottom_box" v-if="getOpenList(item.id )">
								<view class="row_box" v-for='(role,ir) in item.list' :key='ir'>
									<view class="left">
										<image :src="role.users.avatar" mode="scaleToFill"></image>
									</view>
									<view class="right">
										<view class="info">
											<view class="">
												{{role.users.name}}
											</view>
											<view class="">
												{{role.type_text}}
											</view>
											<view class="">
												<text>{{role.month}}-{{role.day}}</text> <text style="margin-left: 30rpx;">{{role.time}}</text>
											</view>
										</view>
										<view class="money">
											{{role.amount}}
										</view>
									</view>
								</view>
							</view>
						</view>
					
				</block>
				<empty  v-else/>
			</view>
			<foot />
		</view>
	</page>
</template>

<script>
	import { getDecorationGoldDetailed } from '../static/api.js'
	export default {
		data(){
			return{
				detailedList:[],
				// page:1,
				// limit:10,
				// total:0,
				openList:[],
				loading:false,
			}
		},
		onLoad(){
			this.getList()
		},
		methods:{
			getOpenList(id){
				if(this.openList.length > 0){
					return this.openList.indexOf(id) != -1 
				}else{
					return false
				}
			},
			setOpenList(id){
				if(this.openList.length > 0){
					this.openList.indexOf(id) == -1  ? this.openList.push(id) :  this.openList.splice(this.openList.indexOf(id),1)
				}else{
					this.openList.push(id)
				}
			},
			async getList(){
				this.loading = true
				uni.showLoading()
				try{
					var res = await getDecorationGoldDetailed()
					this.detailedList = res
					uni.hideLoading()
					this.openList.push(this.detailedList[0].id)
				}catch(err){
					this.loading = false
					uni.hideLoading()
				}
			},
			onRule(){
				uni.navigateTo({
					url:'/pagesMy/decorationGold/rule'
				})
			}
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top_box{
		padding: 0 40rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
		.title{
			padding: 24rpx 0;
			font-size: 24rpx;
			color:#26252A;
		}
		.money{
			display: flex;
			justify-content: space-between;
			align-items: center;
			text{
				font-size: 54rpx;
				line-height: 80rpx;
				color:$theme;
			}
			.zhuangxiujin{
				font-size: 14px;
			}
			image{
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	.list_box{
		box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.02);
		.top_box{
			padding: 30rpx 38rpx 40rpx;
			width: 100%;
			box-sizing: border-box;
			font-size: 24rpx;
			.time{
				line-height: 34rpx;
				margin-bottom: 16rpx;
			}
			image{
				width: 24rpx;
				height: 24rpx;
				margin-left: 16rpx;
				vertical-align: middle;
			}
			.detailed{
				color:#666;
				line-height: 34prx;
				&:last-child{
					margin-left: 20rpx;
				}
			}
		}
		.bottom_box{
			.row_box{
				padding-top: 40rpx;
				padding-left: 34rpx;
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				&:last-child{
					.right{
						border-bottom: 0;
					}
				}
				.left{
					image{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
				}
				.right{
					width: calc(100% - 94rpx);
					box-sizing: border-box;
					padding-bottom: 18rpx;
					padding-right: 38rpx;
					border-bottom: 2rpx solid #EBEBEF;
					display: flex;
					justify-content: space-between;
					.info{
						width: calc(100% - 200rpx);
						>view:nth-child(1){
							color:#26252A;
							font-size: 32rpx;
							line-height: 44rpx;
							margin-bottom: 8rpx;
						}
						>view:nth-child(2),>view:nth-child(3){
							color:#ADADAD;
							font-size: 24rpx;
							line-height: 34rpx;
						}
						>view:nth-child(2){
							margin-bottom: 24rpx;
						}
						
					}
					.money{
						color:#26252A;
						font-size: 28rpx;
						font-weight: 700;
					}
				}
			}
		}
	}
	.list_box_page{
		min-height: 60vh;
	}
</style>
